import React from "react";
import PropTypes from "prop-types";
import {Button, Form, Input,DatePicker, TimePicker} from "antd";
const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;

class SearchForm extends React.Component {
    static propTypes = {
        fields: PropTypes.array,
        btns: PropTypes.array,
        onSearch: PropTypes.func
    }

    constructor(props) {
        super(props)
    }

    handleSearch = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            console.log('Received values of form: ', values);
            this.props.onSearch(values)
        });
    }

    handleReset = () => {
        this.props.form.resetFields();
    }

    getField(field) {
        let props = {}
        if(this.props.readOnly) {
            props.readOnly = true
        }
        if(field.render !== undefined) {
            return field.render(props)
        }
        if(field.type == 'rangedatepicker') {
            return <RangePicker {...props} format="YYYY-MM-DD" />
        }
        return <Input {...props}/>
    }


    getFieldDecorator(field, form, initData) {
        if(field.componentFunc !== undefined) {
            return field.componentFunc({
                form: form,
                field: field,
                initVal: initData
            })
        }
        return form.getFieldDecorator(field.key, {
            initialValue: initData,
            rules: [{required: (field.required) || false, message: (field.requiredMsg || '')}]
        })(
            this.getField(field)
        )
    }


    // To generate mock Form.Item
    getFields() {
        const { getFieldDecorator } = this.props.form;
        const fields = this.props.fields || [];
        const children = [];
        for (let i = 0; i < fields.length; i++) {
            const field = fields[i]
            if(field['hide'] == true) {

            } else {
                children.push(
                    <FormItem key={i} label={field.label}>
                        {
                            this.getFieldDecorator(field, this.props.form , field['initData'] || '')
                        }
                    </FormItem>
                );
            }

        }
        return children;
    }

    getBtns = () => {
        let children = []
        const btns = this.props.btns || []
        btns.map((v, i) => {
            children.push(
                <Button key={i} onClick={() => this.triggerEvent(v)}>{v.label}</Button>
            )
        })
        return children;
    }

    triggerEvent = (v) => {
        this.props.form.validateFields((err, values) => {
            console.log('Received values of form: ', values);
            v.onClick(values)
        });
    }

    render() {
        return (
            <Form
                layout="inline"
                onSubmit={this.handleSearch}
            >
                {
                    this.getFields()
                }
                <FormItem>
                    <Button type="primary" htmlType="submit">查询</Button>,
                    <Button onClick={this.handleReset}>重置</Button>
                    {
                        this.getBtns()
                    }
                </FormItem>
                <style>
                    {`
                        .ant-form-inline .ant-form-item {
                            height: 42px;
                        }
                    `}
                </style>
            </Form>
        );
    }
}

export default Form.create()(SearchForm);
